<template>
    <div>
        <page-container 
        :header-ceiling="pageConfig.header.ceiling"
        :header-ceiling-color="pageConfig.header.ceilingColor"
        :header-regular="pageConfig.header.regular"
        :header-color="pageConfig.header.background"
        :footer-regular="pageConfig.footer.regular"
        :footer-color="pageConfig.footer.background"
        >
            <template slot="content">
                <div class="blog-details-container">
                    <div class="blog-details-main">
                        <section-title :title="blog.title" size="max"></section-title>
                        <div class="blog-info">
                            
                            <div class="author-info">
                                <div>作者：{{ blog.authorName }}</div>
                                <div class="relation" @click="followUser"  style="margin-left: 10px;cursor: pointer;color: red; font-weight: 700;">
                                    {{ relation.follow?'取消关注':'关注' }}
                                </div>
                            </div>
                            <div style="margin-top: 10px;">发布时间：{{ blog.createTime }} </div>
                           
                        </div>
                        <div class="blog-contetn">
                            <div v-html="blog.content" class="content-view">
                            
                            </div>
                            <!-- <div>
                                <pre><code class="language-java">public void main(String[] args[]){

                            }</code></pre>
                            </div> -->
                            <div class="blog-admire">
                               <span @click="addAdmireCount" style="font-size: 40px;" class="iconfont icon-act_dianzan"></span>
                               <span v-if="blog.admireCount&&blog.admireCount>0">+{{ blog.admireCount }}</span>
                            </div>

                        </div>
                        <div style="min-height: 200px;">
                            <div class="comment-list" v-for="(item,index) in commentList" :key="index">
                                <div style="font-size: 20px;font-weight: 600;">
                                    {{ item.nickname }}
                                    <el-tag v-if="item.userId === blog.author"  effect="plain" >作者</el-tag>
                                </div>
                                <div style="color: #999;padding-top: 10px;">{{ item.username }}  </div>
                                <div style="color: #999;font-size: 18px;padding-top: 20px;">{{ item.content }}</div>
                                <div style="color: #999;font-size: 12px;padding-top: 20px;">{{ item.createTime }} 发表评论</div>
                            </div>
                        </div>
                        
                        <div class="blog-optin-main ">
                            <div style="width: 90%;">
                                <div style="font-size: 20px;font-weight: 600;padding: 20px;line-height: 60px;height: 40px;">评论</div>
                                <div class="blog-comment input-deep">
                                    <el-input type="textarea" placeholder="你想说..." v-model="comment.content"></el-input>
                                </div>
                                <div style="padding-top: 20px;padding-bottom: 40px;display: flex;justify-content: flex-end;">
                                    <i-button level="info" @click.native="sendComment">发表评论</i-button>
                                </div>
                            </div>
                            
                            

                            
                        </div>
                        
                    </div>

                </div>
            </template>
        </page-container>

    </div>
</template>

<script>
import PageContainer from '@/components/container/page-container/PageContainer.vue'

import SectionTitle from '@/components/plugs/section-title/SectionTitle.vue'
import IButton from '@/components/plugs/i-button/IButton.vue'
import {get, post} from '@/utils/api.js'
import '@/assets/css/content.css'
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';


 

export default{
    data(){

        return{
            pageConfig:{
                header:{
                    regular:false,
                    ceiling:true,
                    background:'#1E171F',
                    ceilingColor:'#1E171F'
                },
                footer:{
                    regular:true,
                    background:'#1E171F'
                }
            },
            relation:{
                follow:false
            },
            blog:{},
            commentList:[
                
            ],
            comment:{
                content:''
            }

        }
    },
    methods:{
        getBlogDetails(){
           
            const id = this.$route.params.id;
            if(id){
                const promise = get({
                    url:'/base-blog/front/blog/details',
                    params:{id}
                },false);

                promise.then(res=>{
                    
                    if(res){
                        if(res.code === 200){
                            this.blog = res.data;
                            
                            this.getCommentList();
                            this.getRelation();
                            this.$nextTick(()=>{
                                Prism.highlightAll();
                            });
                            return;
                        }
                        this.$message.error(res.message)
                        this.$router.push('/blog');
                           
                        
                       
                    }

                    
                    
                });
            }
           

        },
        getCommentList(){

            const promise = get({
                url:'/base-blog/front/blog/comment/list',
                params:{blogId:this.blog.id}
            });

            promise.then(res=>{
                if(res.code === 200){
                    this.commentList = res.data;
                }
            },false)

        },
        sendComment(){
            if(this.comment.content === null || this.comment.content === ''){
                this.$message.error('评论内容不能为空');
                return;
            }
            const promise = post({
                url:'/base-blog/front/blog/comment/add',
                data:{blogId:this.blog.id,content:this.comment.content}
            });
            promise.then(res=>{
                if(res.code === 200){
                    this.$message.success(res.message);
                    this.comment.content = null;
                    this.getCommentList();
                    return;
                }
                this.$message.error(res.message);
            })
        },
        getRelation(){
            
            const promise = get({
                url:'/base-user/front/user/relation/get',
                params:{followUserId:this.blog.author}
            });

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.relation = res.data;
                }
            })

        },
        followUser(){

            const promise = post({
                url:'/base-user/front/user/relation/follow-or-unfollow',
                data:{
                    followUserId:this.blog.author
                }
            });

            promise.then(res=>{
                if(res){
                    if(res.code === 200){
                        this.$message.success(res.message);
                        this.getRelation();
                        return;
                    }
                    this.$message.error(res.message);
                }
            })

        },
        addAdmireCount(){
            const promise = post({
                url:'/base-blog/front/blog/admire/add',
                data:{blogId:this.blog.id}
            });

            promise.then(res=>{
                if(res&&res.code===200){
                    this.$message.success(res.message);
                    this.getAdmireCount();
                    
                }
            })
        },
        getAdmireCount(){
            const promise = get({
                url:'/base-blog/front/blog/admire/count',
                params:{blogId:this.blog.id}
            },false);

            promise.then(res=>{
                if(res&&res.code===200){
                    this.blog.admireCount = res.data.admireCount;
                    return;
                }
                this.$message.error('获取点赞数据失败~');
            })

        }

    },
    components:{
        PageContainer,
        SectionTitle,
        IButton

    },
    mounted(){
        this.getBlogDetails();
        
        
        
    }
}

</script>

<style scoped>
.blog-details-container{
    display: flex;
    justify-content: center;
}
.blog-details-main{
    width: 1000px;
}
.blog-info{
    margin-top: 40px;
    
    /* justify-content: space-between; */
    color: #999;
}
.author-info{
    display: flex;
}
.blog-contetn{
    border-bottom: 1px solid #dcdfe6;
    min-height: 800px;
    margin-bottom: 20px;
}
.input-deep>>>textarea{
    height: 200px;
    resize:none;
    border: 1px solid #dcdfe6;
    border-radius: 0;
}

.blog-optin-main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 350px;
    border: 1px solid #dcdfe6;
    margin-bottom: 80px;
}
.comment-list{
    padding-top: 40px;
    padding-bottom: 40px;
}
.relation:hover{
    color: #FF6900;
}

.blog-admire{
    color: #FF6900;
    text-align: center;
    padding: 40px;
}

.blog-admire:hover{
    cursor: pointer;

}

</style>